<!-- Horizontal Form -->
<div class="box box-info">
    <div class="box-header with-border">
        <h3 class="box-title">添加角色</h3>
    </div>
    <!-- /.box-header -->
    <!-- form start -->
    <form class="form-horizontal">
        <div class="box-body">
            <div class="form-group">
                <label class="col-sm-2 control-label" for="nameId">名称</label>

                <div class="col-sm-10">
                    <input class="form-control" id="nameId" name="name" placeholder="名称" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label" for="noteId">描述</label>

                <div class="col-sm-10">
                    <input class="form-control" id="noteId" name="note" placeholder="描述" type="text">
                </div>
            </div>
            <div class="form-group">
                <label class="col-sm-2 control-label">授权</label>
                <div class="col-sm-10">
                    <ul class="ztree" id="menuTree"></ul>
                </div>
            </div>
        </div>
        <!-- /.box-body -->
        <div class="box-footer">
            <button class="btn btn-default btn-cancel" type="button">Cancel</button>
            <button class="btn btn-info pull-right btn-save" type="button">Save</button>
        </div>
        <!-- /.box-footer -->
    </form>
</div>
<script src="bower_components/ztree/jquery.ztree.all.min.js" type="text/javascript"></script>
<script type="text/javascript">
    var zTree;
    var setting = {
        data: {
            simpleData: {
                enable: true, //使用简单数据模式
                idKey: "id",  //节点数据中保存唯一标识的属性名称
                pIdKey: "parentId",  //节点数据中保存其父节点唯一标识的属性名称
                rootPId: null  //根节点id
            }
        },
        check: {
            enable: true,
            nocheckInherit: true
        }//此配置提供复选框操作(可查官方zTree)
    }
    $(function () {
        //异步加载菜单信息,初始化页面菜单
        doLoadSysMenus();
        $(".box-footer")
            .on("click", ".btn-save", doSaveOrUpdate)
            .on("click", ".btn-cancel", doCancel);

    });

    function doInitEditFormData(data) {
        console.log("data", data);
        //1.初始化角色自身信息
        $("#nameId").val(data.name);
        $("#noteId").val(data.note);
        //2.初始化菜单信息
        //2.1展开树节点
        zTree.expandAll(true);
        //2.2获取角色对应的菜单id
        var menuIds = data.menuIds;
        //2.3迭代所有菜单id
        for (var i in menuIds) {
            //基于菜单id获取ztree中的node节点
            var node =
                zTree.getNodeByParam("id", menuIds[i]);
            //让节点选中
            zTree.checkNode(node, true, false);
        }
    }

    function doCancel() {
        var url = "role/role_list";
        $("#mainContentId")
            .load(url, function () {
                $("#mainContentId").removeData();
            });
    }

    function doSaveOrUpdate() {
        debugger
        //1.参数(表单数据)
        var params = doGetEditFormData();
        if (!params.name.trim()) {
            alert("角色名不能为空");
            return;
        }
        if (!params.menuIds.trim()) {
            alert("请为角色赋予权限")
            return;
        }
        var data = $("#mainContentId").data("data");
        if (data) params.id = data.id;
        //2.url
        var insertUrl = "role/doSaveObject";
        var updateUrl = "role/doUpdateObject";
        var url = data ? updateUrl : insertUrl;
        //3.ajax request
        $.post(url, params, function (result) {
            if (result.state == 1) {
                alert(result.message);
                doCancel();
            } else {
                alert(result.message);
            }
        })
    }

    function doGetEditFormData() {
        //1.获取角色自身信息
        var params = {
            name: $("#nameId").val(),
            note: $("#noteId").val()
        }
        //2.获取选中菜单信息
        var menuIds = [];
        console.log(zTree)
        var checkedNodes =
            zTree.getCheckedNodes(true);
        for (var i in checkedNodes) {
            menuIds.push(checkedNodes[i].id);
        }
        params.menuIds = menuIds.toString();
        return params;
    }

    //页面加载完成时初始化zTree
    function doLoadSysMenus() {
        var url = "menu/doFindZtreeMenuNodes"
        $.getJSON(url, function (result) {
            console.log(result);
            if (result.state == 1) {
                zTree = $.fn.zTree.init(
                    $("#menuTree"), setting, result.data);
                //修改时添加如下代码(注意先后顺序)
                var rowData = $("#mainContentId").data("data");
                if (rowData) doInitEditFormData(rowData);
            } else {
                alert(result.message);
            }
        });
    }
</script>